{% comment %}
Required parameters:
  filter_categories - filter description structure (see agenda view for example)

Optional parameters:
  always_show - if False or absent, menu closes when not in use and "Customize" button is shown
  customize_button_text - text to show on the "Customize" button (defaults to "Customize...")
{% endcomment %}
<div class="accordion mb-3" id="accordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="heading">
            <button class="accordion-button {% if not always_show %}collapsed{% endif %}"
                    type="button"
                    id="agenda-filter-customize"
                    data-bs-toggle="collapse"
                    data-bs-target="#customize"
                    aria-expanded="{% if not always_show %}false{% else %}true{% endif %}"
                    aria-controls="customize">
                {% firstof customize_button_text "Customize..." %}
            </button>
        </h2>
        <div id="customize"
             class="accordion-collapse collapse{% if always_show %} show{% endif %}"
             aria-labelledby="heading"
             data-bs-parent="#accordion">
            <div class="accordion-body">
                {# options to pass to the JS - correspond to keys in opts object #}
                <span hidden
                      id="agenda-filter-options"
                      data-always-show="{% firstof always_show False %}"></span>
                {% if filter_categories|length >= 1 and filter_categories|first and filter_categories|first|first %}
                    <p>
                        You can customize the agenda view to show only selected sessions,
                        by clicking on groups and areas in the table below.
                        To be able to return to the customized view later, bookmark the resulting URL.
                    </p>
                    <p>
                        Groups in <i>italics</i> are BOFs.
                    </p>
                    <div class="row">
                        {% for fc in filter_categories %}
                            {% for area in fc %}
                                <div class="col-1 ms-1">
                                    <div class="row">
                                        <button type="button"
                                                class="agenda-filter-areaselectbtn overflow-hidden btn btn-sm btn-outline-primary {% if area.label or area.keyword %}pickview {{ area.keyword }}{% endif %}"
                                                data-filter-item="{{ area.keyword }}"
                                                {% if not area.label and not area.keyword %}disabled{% endif %}>
                                            {% if area.label or area.keyword %}
                                                {% firstof area.label area.keyword %}
                                            {% else %}
                                                Other
                                            {% endif %}
                                        </button>
                                    </div>
                                    <div class="row view{% if p.keyword %} {{ p.keyword }}{% endif %}">
                                        <div class="m-0 p-0 btn-group-vertical btn-group-sm"
                                             role="group"
                                             aria-label="{% firstof area.label area.keyword %}">
                                            {% for group in area.children %}
                                                <button type="button"
                                                        class="agenda-filter-groupselectbtn overflow-hidden btn btn-sm btn-outline-secondary pickview {{ group.keyword }}"
                                                        {% if group.toggled_by %}data-filter-keywords="{{ group.toggled_by|join:"," }}"{% endif %}
                                                        data-filter-item="{{ group.keyword }}">
                                                    {% if group.is_bof %}
                                                        <i>{{ group.label|truncatewords:"3"|default:"Plenary" }}</i>
                                                    {% else %}
                                                        {{ group.label|truncatewords:"3"|default:"Plenary" }}
                                                    {% endif %}
                                                </button>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        {% endfor %}
                    </div>
                {% else %}
                    <span class="text-danger">No session data available – no sessions have been scheduled yet.</span>
                {% endif %}
            </div>
        </div>
    </div>
</div>